<template>
    <div class="Message">
       <div class="div">                  
          <p>消息中心</p>
          <div class="div1">
            <el-icon><Delete /></el-icon>
            <el-icon><Setting /></el-icon>
          </div>
         
       </div>
        <div class="div2">
               <div>
                  <img src="/更多.png">
                  <ul @click="ai_chat">
                    <li>客服消息</li>
                    <li class="li">您反馈的问题我们已知惑，请稍后</li>
                  </ul>
                  <p></p>
               </div>
               <div>
                  <img src="/通知.png">
                  <ul>
                    <li>系统消息</li>
                    <li class="li">你提交的个人信息修改申核通过</li>
                  </ul>
                  <p></p>
               </div>
          </div>

          <div class="div3">
               <div>
                  <img src="/01.png">
                  <ul @click="chat">
                    <li>张三丰先生</li>
                    <li class="li">是电样房，有2部电梯，一客一货</li>
                  </ul>
                  <p></p>
               </div>
               <div>
                  <img src="/02.png">
                  <ul>
                    <li>李小红女士</li>
                    <li class="li">老旧小区，不是电样房哦</li>
                  </ul>
                  <p></p>
               </div>
               <div>
                  <img src="/03.png">
                  <ul>
                    <li>黄飞龙先生</li>
                    <li class="li">有电梯的，同时可以乘15人</li>
                  </ul>
                  <p></p>
               </div>
               <div>
                  <img src="/04.png">
                  <ul>
                    <li>韩小青女士</li>
                    <li class="li">老小区了，没有电样的哦</li>
                  </ul>
                  <p></p>
               </div>
               
          </div>
    </div>
</template>

<script>
    import { ref } from 'vue'
    import { useRouter } from 'vue-router'
    export default {
        setup(){
           const router=useRouter()
           const chat=()=>{
               router.push('/talking')
           }
           const ai_chat=()=>{
            router.push('/ai')
           }
            return{
            chat,
            ai_chat
            }
        } 
    }
</script>

<style lang="scss" scoped>

.div{
    width: 95vw;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    p{
        font-size: 20px;
    }
}

.div2{
    width:370px;
    height: 150px;
    background-color: white;
    margin: auto;
    border-radius: 5%;
    overflow: hidden;
    div{
        height: 50px;
        display: flex;
        align-items: center;
       margin-top:10px;
       border-bottom:1px solid rgb(247, 247,247);
       margin-bottom:10px;
       padding-bottom:10px;
    }
    ul{
        margin-left: 20px;
    }
    img{
        width: 50px;
        height: 50px;
        margin-left: 10px;
    }
}
.div3{
    width:370px;
    height: 300px;
    background-color: white;
    margin: 10px auto;
    border-radius: 5%;
    overflow: hidden;
    
    div{
        height: 50px;
        display: flex;
        align-items: center;
       margin-top:10px;
       border-bottom:1px solid rgb(247, 247,247);
       margin-bottom:10px;
       padding-bottom:10px;
    }
    ul{
        margin-left: 20px;
    }
    img{
        width: 50px;
        height: 50px;
        margin-left: 10px;
    }
}
.li{
    width: 140px;
    font-size: 10px;
    margin-top: 10px;
    white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
}
.Message{ 
    width: 100vw;
    height: 100vh;
    background-color:rgb(247, 247,247);
}
</style> r